<template>
  <!-- 灾情勘察首页统计图 -->
  <div class="Emergency">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>灾情勘察</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Emergency-center">
      <div class="Emergency-dt">
        <!-- 地图 -->
        <SjMapList @typeNames="childData" />
      </div>
      <div class="Emergency-tb">
        <!-- 搜索 开始 -->
        <div class="Emergency-tb-bd">
          <div class="select">
            <!-- <select name="chooseDate">
              <option value="国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）Ⅲ级应急响应命令〔2022〕第 03 号" selected>
                国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）Ⅲ级应急响应命令〔2022〕第
                03 号
              </option>
              <option value="国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）Ⅲ级应急响应命令〔2022〕第 04 号">
                国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）Ⅲ级应急响应命令〔2022〕第
                04 号
              </option>
            </select> -->
            <el-select v-model="eventCode" placeholder="请选择" style="width:100%" @change="changes">
              <el-option v-for="item in yjsj_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 搜索 结束 -->
        <!-- 信息 开始 -->
        <!-- <div class="text_content" style="margin-bottom: 6px;padding: 0 6px;">
          <el-row style="margin-top: 10px;color:#fff;">
            <el-col :span="24"><div class="grid-content bg-purple-dark">影响范围：随州市随县柳林镇</div></el-col>
          </el-row>
          <el-row style="margin: 10px 0;color:#fff;">
            <el-col :span="24"><div class="grid-content bg-purple-dark">发生时间：2021-08-12 08:00:00</div></el-col>
          </el-row>
          <el-row style="color:#fff;">
            <el-col :span="24"><div class="grid-content bg-purple-dark">事件概要：随州市随南地区突发持续暴雨天气，柳林镇24小时雨量（503毫米）、12小时雨量（300毫米）、1小时雨量均创有记录以来最大降雨量。</div></el-col>
          </el-row>
        </div> -->
        <!-- 信息结束 -->

        <!--  -->
        <div class="conter_content">
          <div class="one_num">
            <div class="statistics">
              <div class="tongji">勘察任务各专业数量统计</div>
              <div class="zongshu"><span style="">任务总数：</span><span class="num" @click="handleNum">{{
                totalCountNum }}</span> <span class="unit">（个）</span></div>
            </div>
            <div class="box_title">
              <div class="one">
                <div></div>
                <div>已反馈</div>
                <div>未反馈</div>
                <div class="heji">合计</div>
              </div>
              <div class="two two_one">
                <div>基干队伍</div>
                <div>{{ basicTeam.feedbacked }}</div>
                <div>{{ basicTeam.feedback }}</div>
                <div>{{ basicTeam.count }}</div>
              </div>
              <div class="two two_one">
                <div>输电专业</div>
                <div>{{ transmissionDiscipline.feedbacked }}</div>
                <div>{{ transmissionDiscipline.feedback }}</div>
                <div>{{ transmissionDiscipline.count }}</div>
              </div>
              <div class="two two_one">
                <div>变电专业</div>
                <div>{{ substationDiscipline.feedbacked }}</div>
                <div>{{ substationDiscipline.feedback }}</div>
                <div>{{ substationDiscipline.count }}</div>
              </div>
              <div class="two two_one">
                <div>配电专业</div>
                <div>{{ powerDistributionDiscipline.feedbacked }}</div>
                <div>{{ powerDistributionDiscipline.feedback }}</div>
                <div>{{ powerDistributionDiscipline.count }}</div>
              </div>
              <div class="two two_one">
                <div>营销专业</div>
                <div>{{ marketing.feedbacked }}</div>
                <div>{{ marketing.feedback }}</div>
                <div>{{ marketing.count }}</div>
              </div>
            </div>
          </div>
          <div class="echarts_box">
            <div class="video_input">
              <!-- <div></div> -->
              <div class="title_name">灾损设备各类别数量统计</div>
              <div style="margin-left: 10px;">
                <div class="more" @click="handleGengduo">更多<i class="el-icon-d-arrow-right" color="#fff"></i></div>
              </div>
            </div>
            <div class="echarts_legend">
              <div class="legend_one">
                <span class="one"></span>
                <span>输电专业</span>
              </div>
              <div class="legend_two">
                <span class="two"></span>
                <span>配电专业</span>
              </div>
              <div class="legend_three">
                <span class="three"></span>
                <span>变电专业</span>
              </div>
            </div>
            <!-- <div id="oneLeftPie" style="width: 100%;height: 89%;"></div> -->
            <div id="container" style="width: 100%;"></div>
          </div>
        </div>
      </div>
      <div class="Emergency-tb-bt">
        <div class="Emergency-tb-zzt"
          style="margin-top: 10px; border: rgba(10, 73, 187) 1px solid; padding: 0 10px;height: 240px;">
          <div class="display_flex color_fff">
            <div style="margin: 6px 0">
              <span style="color: #fff; font-size: 18px;font-family: Microsoft YaHei;font-weight:bold;">灾情勘察表</span>
              <!-- <span style="color: #ccc; font-size: 12px; margin-left: 10px"
              >报送时间：2021-08-12 09:50:21</span
            > -->
            </div>
            <div class="more" @click="handleMore">更多<i class="el-icon-d-arrow-right" color="#fff"></i></div>
          </div>
          <el-table :row-style="{ background: '#18283a' }" max-height="200px" :header-cell-style="{
            background: '#235ED2',
            color: '#fff',
            border: 'none',
            fontSize: '18px',
            'text-align': 'center'
          }" stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" size="small"
            @row-click="onRowClick">
            <el-table-column label="序号" type="index" align="center" width="60">
            </el-table-column>
            <el-table-column prop="surveyName" label="任务名称" align="left">
            </el-table-column>
            <el-table-column prop="taskContent" align="left" label="任务内容">
            </el-table-column>
            <el-table-column prop="taskAddress" align="left" label="任务地点">
            </el-table-column>
            <el-table-column prop="dutyUnit" label="责任单位/部门" align="center" width="160">
            </el-table-column>
            <el-table-column prop="deviceType" label="设备类型" align="center" width="120">
            </el-table-column>
            <el-table-column prop="damagedPlace" align="center" width="120" label="受损部位">
            </el-table-column>
            <el-table-column prop="damagedOverview" align="center" width="120" label="受损情况">
            </el-table-column>
            <el-table-column prop="dutyOfficer" label="责任人" align="center" width="100">
            </el-table-column>
            <el-table-column prop="createTime" label="发布时间" align="center" width="170">
            </el-table-column>
            <el-table-column prop="planFinishTime" align="center" label="要求完成时间">
            </el-table-column>
            <el-table-column prop="surveyStatusName" align="center" width="85" label="状态">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!--  -->
    <!-- <el-dialog title="受损设备查看" :visible.sync="dialogTableVisible" width="70%">
      <el-table :data="tableData111" :header-cell-style="{
          background: '#eef1f6',
          color: '#000',
        }" style="width: 100%">
        <el-table-column label="序号" width="60" align="center" type="index">
        </el-table-column>
        <el-table-column prop="name" align="center" label="输电线路名称" width="180">
        </el-table-column>
        <el-table-column prop="dydj" align="center" label="电压等级" width="100">
        </el-table-column>
        <el-table-column prop="ssdw" align="center" label="所属单位">
        </el-table-column>
        <el-table-column prop="tytzyy" align="center" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="tdsj" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column width="120" align="center" label="现场勘察">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">未下发</el-button>
          </template>
        </el-table-column>
        <el-table-column width="120" align="center" label="现场抢修">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">未下发</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共一条数据，共1页</div>
        <el-pagination background layout="prev, pager, next" :total="10">
        </el-pagination>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import { echartsBar, getHome } from "@/api/EmergencyDisposal/zqkc.js";
import { getListEmergencyDaily } from "@/api/EmergencyDisposal/yjrb.js";

import SjMapList from "./components/SjMapList.vue";
import "@/assets/style/Emergency.less";
export default {
  name: "DisasterReporting",
  components: { SjMapList },
  data() {
    return {
      typeName: "",
      inputSite: "",
      eventCode: "",
      yjsj_options: [], // 应急是事件options,
      totalCountNum: "", // 任务总数
      basicTeam: {}, // 基干队伍
      transmissionDiscipline: {}, // 输电专业
      substationDiscipline: {}, // 变电专业
      powerDistributionDiscipline: {}, // 配电专业
      marketing: {}, // 营销专业
      tableData: [],
      sbArrayBar: [], // 设备
      pdArrayBar: [], // 配电
      sdArrayBar: [] // sd
    };
  },
  mounted() {
    this.oneLeftPie();
    this.GetAlertInformation();
  },
  methods: {
    onRowClick(row) {
      this.$eventBus.$emit("showKcrwMaps", row);
    },
    GetAlertInformation() {
      const parmas = {
        // pageNum: 1,
        // pageSize: 10
      };
      getListEmergencyDaily(parmas).then(res => {
        const option = res.data.map((item) => {
          return {
            // label: item.judgeName,
            // value: item.id
            label: item.responseName,
            value: item.id
            // ...item
          };
        });
        this.yjsj_options = option;
        console.log(this.yjsj_options);
        this.eventCode = this.yjsj_options[0].value;
        console.log(this.eventCode);
        // this.loadDataBar();
        this.loadDataTab();
        // this.oneLeftPie(); // 饼图
        // this.loadDatalist();
        // this.eventTypeCode = Number(res[0].eventCode)
        // this.changes(res[0].id)
      });

    },
    // 勘察任务各专业数量统计
    loadDataTab() {
      // console.log("ccccccccccccc");
      // zqkcCount({
      getHome({
        sourceInfoId: this.eventCode
      }).then(res => {
        // console.log(res, "表格");
        this.totalCountNum = res.totalCount;
        this.basicTeam = res.major[0].基干队伍;
        this.transmissionDiscipline = res.major[1].输电专业;
        this.substationDiscipline = res.major[2].变电专业;
        this.powerDistributionDiscipline = res.major[3].配电专业;
        this.marketing = res.major[4].营销专业;
        this.tableData = res.surveyList;
        // console.log(this.tableData);
      });
      // this.initCharts()
    },
    // 灾损设备各类别数量统计
    loadDataBar() {
      // console.log("ccccccccccccc");
      console.log(this.eventCode);
      echartsBar({
        // sourceInfoId: "1523055109079072"
        sourceInfoId: this.eventCode
      }).then(res => {
        console.log(res, "柱状图");
        this.sbArrayBar = res.bd;
        console.log(res.bd, "柱状图1");
        console.log(res.pd, "柱状图2");
        this.pdArrayBar = res.pd;
        console.log(res.sd, "柱状图3");
        this.sdArrayBar = res.sd;
        this.oneLeftPie(); // 饼图
      });
      // this.initCharts()
    },
    dialogVisibleClick(i) {
      this.btnNum = i.id;
      console.log(this.btnNum);

    },
    // 首页底部列表数据
    // async loadDatalist() {
    //   // const parmas = {
    //   //   surveyStatus: 2
    //   // };
    //   const res = await listIndexPage();
    //   console.log(res);
    //   this.tableData = res;
    //   console.log(this.tableData);
    //   // this.paginationAtrrs.total = res.total

    // },
    childData(param) {
      if (param) {
        this.typeName = param[0].name;
        this.$nextTick(() => {
          // this.TeamLeftPie() // 饼图
          // this.TeamRightLBar() // 柱状图
        });
      }
    },
    // oneLeftPie () {
    //   console.log("aaaaaaaaaaaa");
    //   console.log(this.sbArrayBar);
    //   //  获取数据
    //   const option = {
    //     title: {
    //       // text: 'World Population'
    //     },
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "shadow"
    //       }
    //     },
    //     // legend: {},
    //     grid: {
    //       left: "3%",
    //       right: "4%",
    //       bottom: "3%",
    //       containLabel: true
    //     },
    //     xAxis: {
    //       type: "value",
    //       // axisLine: {// 刻度线显隐
    //       //   show: false
    //       // },
    //       // axisTick: {show: true}, // 去掉刻度
    //       // splitLine: { // 去掉背景水平网格线
    //       //   show: false
    //       // },
    //       // axisLabel: {
    //       //   color: "#fff" // 刻度线标签颜色
    //       // },
    //       boundaryGap: [0, 0.01],
    //       //
    //       axisTick: {
    //         show: true // 坐标轴刻度线
    //       },
    //       axisLine: { // 轴线
    //         show: true
    //       },
    //       splitLine: { // 去除x网格线
    //         show: false
    //       },
    //       axisLabel: { // x坐标轴刻度线样式
    //         textStyle: {
    //           fontSize: "14",
    //           color: "#fff"
    //         }
    //       }
    //     },
    //     yAxis: {
    //       type: "category",
    //       // show: false,
    //       axisLabel: {
    //         textStyle: {
    //           fontSize: "14"
    //         },
    //         color: "#fff" // 刻度线标签颜色
    //       },
    //       // axisTick : {show: false},//去掉刻度
    //       //   splitLine:{      //去掉背景水平网格线
    //       //       show:false
    //       //   },
    //       data: [{
    //         value: this.sbArrayBar[0].name
    //       }, {
    //         value: this.sbArrayBar[1].name
    //       }, {
    //         value: this.sbArrayBar[2].name
    //       }, {
    //         value: this.pdArrayBar[0].name
    //       }, {
    //         value: this.pdArrayBar[1].name
    //       }, {
    //         value: this.pdArrayBar[2].name
    //       }, {
    //         value: this.sdArrayBar[0].name
    //       }, {
    //         value: this.sdArrayBar[1].name
    //       }, {
    //         value: this.sdArrayBar[2].name
    //       }]
    //     },
    //     series: [
    //       {
    //         // name: "2011",
    //         type: "bar",
    //         barWidth: 18,
    //         // data: [{
    //         //   value: this.sbArrayBar[0].count,
    //         // }, {
    //         //   value: this.sbArrayBar[1].count,
    //         // }, {
    //         //   value: this.sbArrayBar[2].count,
    //         // }, 9, 12, 15, 16, 10, 11],
    //         data: [{
    //           value: this.sbArrayBar[0].count
    //         }, {
    //           value: this.sbArrayBar[1].count
    //         }, {
    //           value: this.sbArrayBar[2].count
    //         }, {
    //           value: this.pdArrayBar[0].count
    //         }, {
    //           value: this.pdArrayBar[1].count
    //         }, {
    //           value: this.pdArrayBar[2].count
    //         }, {
    //           value: this.sdArrayBar[0].count
    //         }, {
    //           value: this.sdArrayBar[1].count
    //         }, {
    //           value: this.sdArrayBar[2].count
    //         }],
    //         label: {
    //           show: true,
    //           position: "right",
    //           valueAnimation: true,
    //           color: "#fff"
    //         },
    //         itemStyle: {
    //           normal: {
    //             barBorderRadius: [0, 5, 5, 0], // 柱状图顶端圆角
    //             color: function (params) {
    //               // 给出颜色组
    //               var colorList = ["#F1DD5E", "#F1DD5E", "#F1DD5E", "#5FECE2", "#5FECE2", "#5FECE2", "#5390F3", "#5390F3", "#5390F3"];
    //               return colorList[params.dataIndex];
    //             }
    //           }
    //         }
    //       }
    //     ]
    //   };
    //   var myChart = this.$echarts.init(document.getElementById("oneLeftPie")); // 图标初始化
    //   myChart.setOption(option); // 渲染页面
    //   // 随着屏幕大小调节图标
    //   window.addEventListener("resize", () => {
    //     myChart.resize();
    //   });
    // },
    oneLeftPie() {
      this.$Highcharts.chart("container", {
        chart: {
          type: "column",
          margin: 56,
          inverted: true, // 横向
          backgroundColor: "transparent",

          options3d: {
            enabled: true,
            alpha: 10,
            beta: 10,
            depth: 70,
            viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
            frame: { // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
              // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
              // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
              bottom: {
                size: 10
              },
              side: {
                size: 1,
                color: "transparent"
              },
              back: {
                size: 1,
                color: "transparent"
              }
            }
          }
        },
        title: { // 去除 头部 chart title
          text: null
        },
        credits: { // 去除logo
          enabled: false
        },
        legend: { // 去除图例
          enabled: false
        },
        colors: ["#1ED91C", "#1ED91C", "#1ED91C", "#B24C22", "#B24C22", "#B24C22", "#61D8EC", "#61D8EC", "#61D8EC"],
        xAxis: {
          // categories: this.$Highcharts.getOptions().lang.shortMonths,
          categories: ["绝缘子", "铁塔", "导线", "变压器", "电杆", "集控箱", "隔离刀闸", "隔离开关", "互感器"],
          // categories: [
          //   [this.sbArrayBar[0].name],
          //   [this.sbArrayBar[1].name],
          //   [this.sbArrayBar[2].name],
          //   [this.pdArrayBar[0].name],
          //   [this.pdArrayBar[1].name],
          //   [this.pdArrayBar[2].name],
          //   [this.sdArrayBar[0].name],
          //   [this.sdArrayBar[1].name],
          //   [this.sdArrayBar[2].name]
          // ],
          gridLineColor: "transparent",
          labels: {
            staggerLines: 1,
            style: {
              color: "#fff", // 颜色
              fontSize: "14px" // 字体
            }
          }
        },
        yAxis: {
          title: {
            text: null
          },
          gridLineWidth: 0, // 隐藏y轴刻度线
          allowDecimals: false, // 刻度数值为整数
          labels: {
            staggerLines: 1,
            style: {
              color: "#fff", // 颜色
              fontSize: "14px" // 字体
            }
          },
          gridLineColor: "#fff",
          gridLineDashStyle: "Dash",
          lineColor: "#22588F"
        },
        tooltip: {
          headerFormat: "<b>{point.key}</b>",
          // pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}',
          pointFormat: '<span style="color:{series.color}"></span>： {point.y}',
          backgroundColor: "rgba(22,66,120)",
          style: {
            color: "#fff"
          }
        },
        plotOptions: { // 柱状图 顶部数值
          column: {
            depth: 25,
            pointPadding: 0.2,
            borderWidth: 0,
            dataLabels: {
              enabled: true, // 设置显示对应y的值
              style: {
                color: "#fff"
              }
            }
          }
        },
        series: [{
          // name: '销售',
          colorByPoint: true,
          data: [1, 2, 6, 9, 12, 15, 16, 17, 18]
          // data: [
          //   [this.sbArrayBar[0].count],
          //   [this.sbArrayBar[1].count],
          //   [this.sbArrayBar[2].count],
          //   [this.pdArrayBar[0].count],
          //   [this.pdArrayBar[1].count],
          //   [this.pdArrayBar[2].count],
          //   [this.sdArrayBar[0].count],
          //   [this.sdArrayBar[1].count],
          //   [this.sdArrayBar[2].count]
          // ]
        }]
      });
    },
    changes(val) {
      console.log(val);
      this.eventCode = val;
      this.loadDataTab();
      // this.loadDataBar();
      // this.loadDatalist();
    },
    // 任务总数
    handleNum() {
      // this.$router.push("/DisasterSurveyFeedbackList");
      this.$router.push({
        path: "/DisasterSurveyFeedbackList",
        query: { surveyStatus: "kong", sourceInfoId: this.eventCode }
      });
    },
    // 柱状图 更多
    handleGengduo() {
      this.$router.push("/DamageStatisticsForm");
    },
    // 列表 更多
    handleMore() {
      this.$router.push({
        path: "/DisasterSurveyFeedbackList",
        query: { surveyStatus: "4", sourceInfoId: this.eventCode }
      });
    }
  }
};
</script>

<style scoped lang="less">
// @import "../../../assets/style/DisasterInformation.less";
.Emergency {
  height: 100%;
  padding: 0px 20px;
  margin: 0;

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  .Emergency-tb-zzt /deep/ .el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--stripedtd {
    background-color: #233347;
    /*隔行变色*/
  }

  .Emergency-tb-zzt /deep/ .el-table__body {
    color: #fff !important;
  }

  .Emergency-tb-zzt /deep/ .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
  }

  .Emergency-tb-zzt /deep/ .el-table tr {
    background-color: transparent !important;
  }

  .Emergency-tb-zzt /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: rgba(255, 255, 255, 0.2);
  }

  .Emergency-tb-zzt /deep/ .el-table td {
    border-bottom: 0px solid #dfe6ec !important;
  }

  .Emergency-tb-zzt /deep/ .el-table th {
    border-bottom: 0px solid #dfe6ec !important;
  }

  .Emergency-tb-zzt /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: transparent;
  }

  /deep/ .el-table__body tr:hover>td {
    background-color: rgba(255, 255, 255, 0.2);
  }

  /deep/ .el-table__body tr.current-row>td {
    background-color: rgba(255, 255, 255, 0.2);
  }

  //
  .Emergency-tb-bd {
    width: 100%;
    height: 10%;

    .flexBetweens {
      align-items: center;
    }

    :deep(.el-form) {
      margin-top: 10px;
    }

    :deep(.el-form-item__label) {
      font-family: PingFang SC;
      font-weight: 400;
      font-style: normal;
      color: #eeeeee;
    }

    :deep(.el-form-item__content) {
      width: 60%;
    }

    :deep(.el-input__inner) {
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      position: relative;
      vertical-align: middle;
      padding: 0;
      overflow: hidden;
      border: none;
      opacity: 0.9;
      box-shadow: 1px 1px 10px 2px #36afff inset;
      border-radius: 4px;
      background: rgba(46, 88, 219, 0.5);
      text-shadow: none;
      transition: box-shadow 0.25s ease;
      z-index: 2;
      padding-left: 10px;
    }
  }

  .Emergency-center {
    width: 100%;
    height: 95%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .Emergency-tb-bt {
      width: 100%;
      height: 33%;
      // height: 45%;
      // border: #3270ff 1px solid;
      // border: rgba(10, 73, 187) 1px solid;
      border-radius: 4px;

      :deep(.el-input__inner) {
        height: 23px;
        line-height: 23px;
        border: #3270ff 1px solid;
        color: #eeeeee;
        background-color: rgba(34, 88, 143, 1);
      }
    }

    .Emergency-dt {
      width: 45%;
      height: 65%;
      border: rgba(10, 73, 187) 1px solid;

    }

    .Emergency-tb {
      width: 54%;
      height: 65%;
      display: flex;
      flex-direction: column;

      // justify-content: space-between;
      .text_content {
        width: 100%;
        // height: 45%;
        height: 300px;
        border: rgba(10, 73, 187) 1px solid;
        border-radius: 4px;

        :deep(.el-input__inner) {
          height: 23px;
          line-height: 23px;
          border: #3270ff 1px solid;
          color: #eeeeee;
          background-color: rgba(34, 88, 143, 1);
        }
      }

      .el-header,
      .el-footer {
        background-color: #3270ff;
        color: #333;

        line-height: 40px;
      }

      .conter_content {
        width: 100%;
        height: 90%;
        display: flex;
        border: rgba(10, 73, 187) 1px solid;

        >div {
          flex: 1;
        }

        .one_num {
          display: flex;
          flex-direction: column;

          .statistics {
            display: flex;
            padding: 10px 30px;
            margin-top: 10px;
            text-align: center;
            // justify-content: center;
            justify-content: space-between;

            .tongji {
              font-size: 22px;
              font-weight: 600;
              color: #fff;
              font-family: Microsoft YaHei UI;
            }

            .zongshu {
              color: #fff;
              margin-left: 6px;
              font-weight: bold;

              .num {
                color: #d8fc09;
                font-size: 18px;
                border-bottom: 1px solid #d8fc09;
              }

              .unit {
                color: #fff;
                font-size: 12px;
                // margin-left: 12px;
              }
            }
          }

          .box_title {
            margin-top: 10px;

            .one {
              display: flex;

              div {
                flex: 1;
                color: #fff;
                font-size: 20px;
                margin-left: 8px;
                font-family: Microsoft YaHei;
              }
            }

            .two {
              display: flex;

              >div {
                flex: 1;
                color: #fff;
                font-size: 14px;
              }
            }

            .two_one {
              padding: 0 5%;
              margin: 2% 0 5% 0;

              // text-align: center;
              div:nth-child(1) {
                width: 20px;
                height: 40px;
                line-height: 40px;
                color: #ffffff;
                font-size: 16px;
                text-align: center;
                margin-right: 16px;
              }

              div:nth-child(2) {
                width: 20px;
                height: 40px;
                line-height: 40px;
                color: #f59a23;
                border: rgba(10, 73, 187) 1px solid;
                font-size: 24px;
                margin: 0 50px 0 -20px;
                text-align: center;
                font-family: Microsoft YaHei;
                font-weight: bold;
              }

              div:nth-child(3) {
                width: 20px;
                height: 40px;
                line-height: 40px;
                color: #95f204;
                border: rgba(10, 73, 187) 1px solid;
                font-size: 24px;
                margin: 0 50px 0 -20px;
                text-align: center;
                font-family: Microsoft YaHei;
                font-weight: bold;
              }

              div:nth-child(4) {
                width: 20px;
                height: 40px;
                line-height: 40px;
                color: #ffffff;
                border: rgba(10, 73, 187) 1px solid;
                font-size: 24px;
                margin: 0 25px 0 -20px;
                text-align: center;
                font-family: Microsoft YaHei;
                font-weight: bold;
              }
            }
          }
        }
      }

      .video_input {
        display: flex;
        justify-content: space-between;
        padding: 10px 14px;
        margin-top: 10px;

        .title_name {
          color: #fff;
          font-size: 22px;
          font-weight: 600;
          text-align: center;
        }
      }


    }
  }
}

:deep .el-table__cell.gutter {
  background: rgb(35, 94, 210);
}

:deep(div::-webkit-scrollbar-thumb) {
  border-radius: 10px;
  box-shadow: none;
  background-color: transparent;
}

:deep(div::-webkit-scrollbar-track) {
  border-radius: 0;
  background: transparent;
  border: none;
}

.echarts_box {
  margin-left: 10px;
  position: relative;
  display: flex;
  flex-direction: column;

  #container {
    flex: 1;
  }

  .echarts_legend {
    display: flex;
    position: absolute;
    color: #fff;
    top: 15%;
    left: 23%;

    .legend_one {
      text-align: center;

      .one {
        display: inline-block;
        height: 14px;
        width: 14px;
        background: #1ED91C;
        margin-right: 6px;
        border-radius: 4px;
      }
    }

    .legend_two {
      margin: 0 20px;
      text-align: center;

      .two {
        display: inline-block;
        height: 14px;
        width: 14px;
        background: #B24C22;
        margin-right: 6px;
        border-radius: 4px;
      }
    }

    .legend_three {
      text-align: center;

      .three {
        display: inline-block;
        height: 14px;
        width: 14px;
        background: #61D8EC;
        margin-right: 6px;
        border-radius: 4px;
      }
    }
  }
}

/deep/ .el-table::before {
  background: none;
}

// /deep/ .el-table .cell{
//   font-size: 1px;
// }
/deep/ .el-table .el-table__cell .cell {
  font-size: 16px;
  line-height: 20px;
}

.more {
  // color:#2052DD;
  color: #fff;
  font-size: 16px;
  font-family: "Microsoft YaHei";
  cursor: pointer;
}

.display_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.color_fff {
  color: #fff;
}

.select {
  display: inline-block;
  width: 100%;
  // height: 50%;
  height: 40px;
  position: relative;
  vertical-align: middle;
  padding: 0;
  overflow: hidden;
  border: none;
  opacity: 0.9;
  box-shadow: 1px 1px 10px 2px #36afff inset;
  border-radius: 4px;
  background: rgba(46, 88, 219, 0.5);
  text-shadow: none;
  transition: box-shadow 0.25s ease;
  z-index: 2;
}

.select_one {
  :deep(.el-input__inner) {
    height: 40px !important;
  }
}

.select:hover {
  box-shadow: 1px 1px 10px 2px rgb(43, 140, 243) inset;
}

.select:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #fff;
  top: 45%;
  right: 10px;
  cursor: pointer;
  z-index: -2;
}

.select select {
  cursor: pointer;
  // color: rgb(255, 255, 255);
  color: #fff;
  padding: 4px 10px;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 18px;
  font-weight: bold;

  option {
    padding-top: 15px;
    padding-bottom: 15px;
    background: rgba(46, 88, 219, 0.5);
    color: #fff;
  }
}

.select select:focus {
  outline: none;
}

.transmission_select,
.content_lj {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 20px 0 20px;
  height: 30px;

  >div {
    color: #fff;
    font-size: 14px;
    // margin-bottom: 30px;
  }
}

.el-table__row.statistics-warning-row {
  background: red;
}
</style>
